<!DOCTYPE html>
<html lang="en">
<?php
// 启动会话
session_start();
?>

<script>
    function userIsLoggedIn() {
        // 在这里实现用户登录状态的检查逻辑
        // 返回值为布尔值，true 表示用户已登录，false 表示用户未登录
        // 示例：检查用户是否具有有效的登录凭据
        // 这里改为检查会话中的登录状态
        return <?php echo isset($_SESSION['loggedin']) && $_SESSION['loggedin'] ? 'true' : 'false'; ?>;
    }

    // 在页面加载时检查用户登录状态
    window.addEventListener('DOMContentLoaded', function() {
        if (!userIsLoggedIn()) {
            window.location.href = '../Login.php'; // 请将 'login.html' 替换为您实际的登录页面路径
        }
    });
</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预定管理和订单管理</title>
    <link rel="stylesheet" href="../css/bootstrap.min441.css">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/jquery-ui.css">
    <link rel="stylesheet" href="../css/bootstrap-select.css">

    <!-- JavaScript代码 -->
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/jquery-3.5.1.slim.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min441.js"></script>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min4.3.1.js"></script>
    <script src="../js/jquery-ui.js"></script>
    <script src="../js/bootstrap-select.js"></script>



    <!-- 筛选库 -->
    <!-- jQuery 库 -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- DataTables 核心库 -->
    <link rel="stylesheet" href="../css/jquery.dataTables.css">
    <script src="../js/jquery.dataTables.js"></script>
    <!-- 引入 Date input 插件的样式文件 -->
    <link rel="stylesheet" type="text/css" href="../css/dataTables.dateTime.min.css">
    <!-- 引入 Date input 插件的 JavaScript 文件 -->
    <script type="text/javascript" src="../js/dataTables.dateTime.min.js"></script>




</head>
<style>
    /* 第一个表格 */
    /* 设置表格的基本样式 */
    #bookingTable {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-family: Arial, sans-serif;
    }

    /* 设置表头中的单元格样式 */
    #bookingTable th {
        background-color: #f2f2f2;
        color: #333;
        font-weight: bold;
        text-align: center;
        padding: 8px;
        border: 1px solid #ccc;
    }

    /* 设置表格数据行中的偶数行样式 */
    #bookingTable tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    /* 设置表格数据行中的奇数行样式 */
    #bookingTable tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    /* 设置表格数据单元格样式 */
    #bookingTable td {
        text-align: center;
        padding: 8px;
        border: 1px solid #ccc;
    }

    /* 设置操作按钮单元格的样式 */
    #bookingTable .operation {
        text-align: center;
    }

    /* 设置操作按钮的样式 */
    #bookingTable .operation button {
        padding: 6px 12px;
        margin: 3px;
        border: none;
        cursor: pointer;
        border-radius: 3px;
    }

    /* 设置操作按钮的不同类别样式 */
    #bookingTable .operation .delete-booking {
        background-color: #ff6666;
        color: #ffffff;
    }

    #bookingTable .operation .view-details {
        background-color: #ffcc66;
        color: #ffffff;
    }


    /* 第二个表格 */
    #yourTableId1 {
        width: 100%;
        /* 设置表格宽度为100%，让表格充满父容器 */
        border-collapse: separate;
        /* 移除表格边框线 */
        border-spacing: 0;
        /* 设置单元格之间无间隙 */
        table-layout: fixed;
        /* 设置表格布局为固定模式 */
        width: 100%;
        /* 设置表格宽度为100%，让表格充满父容器 */
        border-collapse: collapse;
        /* 合并表格边框 */
    }


     /* 设置表格数据行中的偶数行样式 */
     #tableBody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    /* 设置表格数据行中的奇数行样式 */
    #tableBody tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .table-header-cell,
    #yourTableId1 select {
        width: 100%;
    }

    #yourTableId1 th,
    #yourTableId1 td {
        padding: 10px;
        /* 设置单元格内边距 */
    }
    #yourTableId1 th:nth-child(15),
    #yourTableId1 td:nth-child(15) {
        width: 200px;
        /* 设置备注列的宽度为200px */
        word-wrap: break-word;

    }

    #yourTableId1 th:nth-child(3),
    #yourTableId1 td:nth-child(3) {
        word-wrap: break-word;

    }

    #yourTableId1 th:nth-child(14),
    #yourTableId1 td:nth-child(14) {
        word-wrap: break-word;

    }

    #yourTableId1 th {
        background-color: #f2f2f2;
        /* 设置表头背景颜色 */
        font-size: 14px;
        /* 设置表头字体大小 */
        font-weight: bold;
        /* 设置表头字体加粗 */
    }

    #yourTableId1 td {
        font-size: 12px;
        /* 设置数据单元格字体大小 */
    }
</style>

<body>
    <div class="container">
        <!-- 预定管理 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">酒店后台管理系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="./预购订单管理.php">预订管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./房态查询页面.php">房态查询<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./房间状态管理.php">房态管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./后台房源管理页面.php">房源管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./客户管理页面.php">客户管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="./账户管理页面.php">账户管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./留言后台查看界面.php">留言管理<span class="sr-only">(current)</span></a>
                    </li>


                    <li class="nav-item">
                        <a class="nav-link" href="../backend01.php">退回主页<span class="sr-only">(current)</span></a>
                    </li>

                </ul>
            </div>
        </nav>

        <div class="container mt-4">
            <h1 style="text-align: center; margin-bottom: 20px;">预订管理</h1>
            <div class="row">
                <div class="col-md-4">
                    <h4>预定管理要求须知</h4>
                    <ul class="list-unstyled">
                        <li>
                            <p style="font-size: 15px;">1、确认房间可用性：提前核实所需房间在预定日期范围内的可用性，以确保顺利预定。</p>
                        </li>
                        <li>
                            <p style="font-size: 15px;">2、遵守预定政策：遵循公司的预定规定，包括预定时间限制、取消政策和付款方式等。</p>
                        </li>
                        <li>
                            <p style="font-size: 15px;">3、核实个人信息准确性：确认客户提供的个人信息准确无误，例如姓名、电话号码等。</p>
                        </li>
                        <li>
                            <p style="font-size: 15px;">4、记录预定细节：详细记录入住日期、退房日期、房间类型、房间号、入住人数等信息，以便日后查询。</p>
                        </li>
                        <li>
                            <p style="font-size: 15px;">5、确认支付方式：确认客户的支付方式，并妥善记录付款细节，以避免后续问题。</p>
                        </li>
                        <li>
                            <p style="font-size: 15px;">6、留意特殊要求和备注：注意客户的特殊要求和备注，例如无烟房、床型偏好等，努力满足客户需求，提供优质服务体验。</p>
                        </li>
                    </ul>
                </div>
                <form class="col-md-8" id="myFrom01">
                    <div class="form-row">
                        <div class="form-group col-md-3">
                            <label for="customerName">客户姓名</label>
                            <input type="text" class="form-control" id="customerName" placeholder="姓名">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="customerPhone">客户电话</label>
                            <input type="text" class="form-control" id="customerPhone" placeholder="电话">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="roomType">房间类型</label>
                            <select class="form-control" id="roomType" title="选择房类型" data-live-search="true">

                                <option value="单人间">单人间</option>
                                <option value="双人间">双人间</option>
                                <option value="豪华大床房">豪华大床房</option>
                                <!-- 添加更多房间类型选项 -->
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="roomCount">预定房间数量</label>
                            <select class="form-control" id="roomCount" title="预购数量" data-live-search="true">

                                <option value="1">1间</option>
                                <option value="2">2间</option>
                                <option value="3">3间</option>
                                <option value="4">4间</option>
                                <option value="5">5间</option>
                            </select>
                        </div>
                        <div class="form-row col-md-6 ">
                            <div class="col-md-6">
                                <label for="checkinDate">入住日期</label>
                                <input type="date" class="form-control" id="checkinDate" placeholder="预计入住日期">
                            </div>
                            <script>
                                // 更新当前日期的函数
                                function updateCurrentDate() {
                                    const currentDate = new Date().toISOString().split("T")[0];
                                    document.getElementById("checkinDate").value = currentDate;
                                }

                                // 初始化时更新一次当前日期
                                updateCurrentDate();

                                // 每分钟更新一次当前日期
                                setInterval(updateCurrentDate, 60000);
                            </script>
                            <div class="col-md-6">
                                <label for="checkoutDate">退房日期</label>
                                <input type="date" class="form-control" id="checkoutDate" placeholder="预计退房日期">
                            </div>
                            <script>
                                // 更新增加一天后的日期的函数
                                function updateCheckoutDate() {
                                    const currentDateAddOne = new Date();
                                    currentDateAddOne.setDate(currentDateAddOne.getDate() + 1);
                                    const tomorrowDate = currentDateAddOne.toISOString().split("T")[0];
                                    document.getElementById("checkoutDate").value = tomorrowDate;
                                }

                                // 初始化时更新一次增加一天后的日期
                                updateCheckoutDate();
                                // 每分钟更新一次增加一天后的日期
                                setInterval(updateCheckoutDate, 60000);
                            </script>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="adultCount">入住大人数</label>
                            <select class="form-control" id="adultCount" title="几个大人" data-live-search="true">

                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="5">6</option>
                                <!-- 添加具体大人人数选项 -->
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="childCount">入住小孩数量</label>
                            <select class="form-control" id="childCount" title="几个小孩儿" data-live-search="true">
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <!-- 添加具体小孩数量选项 -->
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="scheduledTime">预定时间</label>
                            <input type="datetime-local" class="form-control" id="scheduledTime" placeholder="预定时间">
                        </div>

                        <script>
                            // 格式化时间，确保小于10的数值前面加0
                            function formatTime(time) {
                                return time < 10 ? "0" + time : time;
                            }
                            // 更新预定时间的函数
                            function updateScheduledTime() {
                                var scheduledTimeField = document.getElementById("scheduledTime");
                                var currentDateTime = new Date();
                                var year = currentDateTime.getFullYear();
                                var month = formatTime(currentDateTime.getMonth() + 1);
                                var day = formatTime(currentDateTime.getDate());
                                var hours = formatTime(currentDateTime.getHours());
                                var minutes = formatTime(currentDateTime.getMinutes());
                                var formattedTime = `${year}-${month}-${day}T${hours}:${minutes}`;
                                scheduledTimeField.value = formattedTime;
                            }
                            // 每分钟更新一次时间
                            setInterval(updateScheduledTime, 60000);
                            // 页面加载时初始化预定时间
                            updateScheduledTime();
                        </script>
                        <div class="form-group col-md-3">
                            <label for="roomNumber">房间号</label>
                            <select class="form-control" id="roomNumber" title="选择房间号" data-live-search="true">
                                <option value="101">101</option>
                                <option value="201">201</option>
                                <option value="301">301</option>
                                <option value="401">401</option>
                                <option value="501">501</option>
                                <option value="601">601</option>
                                <!-- 添加具体房间号选项 -->
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="paymentMethod">支付方式</label>
                            <select class="form-control" id="paymentMethod" title="选择支付方式" data-live-search="true">
                                <!-- 添加具体支付方式选项 -->
                                <option value="支付宝">支付宝</option>
                                <option value="微信">微信</option>
                                <option value="银联卡">银联卡</option>
                                <option value="现金">现金</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="bookingMethod">预订方式</label>
                            <select class="form-control" id="bookingMethod">
                                <option value="线下预定">线下预定</option>
                                <option value="线上预定">官网预定</option>
                                <option value="线上预定">APP预定</option>
                            </select>
                        </div>
                        <script>
                            // 设置默认选择为 "线下预定"
                            document.getElementById("bookingMethod").value = "线下预定";
                        </script>
                        <div class="form-group col-md-12">
                            <textarea class="form-control" id="textarea" rows="4" placeholder="备注"></textarea>
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-6 row">
                            <div class="form-group col-md-6">
                                <button type="submit" id="cancelButton" class="btn btn-primary">取消预订</button>
                            </div>
                            <div class="form-group col-md-6">
                                <button type="submit" id="addBookingButton" class="btn btn-danger">添加预订</button>
                            </div>
                        </div>

                    </div>
                </form>

                <table class=" " id="bookingTable">
                    <h3>客户自主预定房间分配管理-请及时处理</h3>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>客户姓名</th>
                            <th>客户电话</th>
                            <th>房间类型</th>
                            <th>房间数量</th>
                            <th>入住时间</th>
                            <th>退房日期</th>
                            <th>入住大人数</th>
                            <th>入住小孩数</th>
                            <th>预定时间</th>
                            <th>房间号</th>
                            <th>支付方式</th>
                            <th>预定方式</th>
                            <th>预定账号</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id=" ">
                        <!-- 这里使用假数据填充表格 -->

                        <!-- 更多假数据行 -->
                    </tbody>
                </table>
            </div>

        </div>





    </div>
    <!-- 订单管理 -->
    <!-- 订单管理 -->
    <div class="container mt-4">
        <h2 style="text-align: center;">订单管理</h2>
        <table class="table" id="yourTableId1">
            <thead class="table-header">
                <tr>
                    <th table-header-cell>序号</th>
                    <th table-header-cell>客户姓名</th>
                    <th table-header-cell>客户电话</th>
                    <th table-header-cell>房间类型</th>
                    <th table-header-cell>房间数量</th>
                    <th table-header-cell>入住时间</th>
                    <th table-header-cell>退房日期</th>
                    <th table-header-cell>入住大人数</th>
                    <th table-header-cell>入住小孩数</th>
                    <th table-header-cell>预定时间</th>
                    <th table-header-cell>房间号</th>
                    <th table-header-cell>支付方式</th>
                    <th table-header-cell>预定方式</th>
                    <th table-header-cell>预定账号</th>
                    <th table-header-cell>备注</th>
                    <th table-header-cell>操作</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                <!-- 数据行 -->
            </tbody>
        </table>
    </div>
    <!-- 更多模块的内容在这里添加 -->
    <!-- <button class="btn btn-warning edit-booking">编辑</button> -->


    <!-- 模态框 -->
    <!-- Modal -->
    <!-- Modal -->
    <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-customer-id="your-customer-id">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">预定系统</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="col-md-12" id="myFrom02">
                        <div class="form-row">
                            <div class="form-group col-md-12" style="display:none;">
                                <input type="hidden" class="form-control" id="editPredetermine_id">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="CustomerName">客户姓名</label>
                                <input type="text" class="form-control" id="CustomerName" placeholder="姓名">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="CustomerPhone">客户电话</label>
                                <input type="text" class="form-control" id="CustomerPhone" placeholder="电话">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="RoomType">房间类型</label>
                                <select class="form-control" id="RoomType" title="房间类型" data-live-search="true">

                                    <option value="单人间">单人间</option>
                                    <option value="双人间">双人间</option>
                                    <option value="豪华大床房">豪华大床房</option>
                                    <!-- 添加更多房间类型选项 -->
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="RoomCount">预定房间数量</label>
                                <select class="form-control" id="RoomCount" title="房间数量" data-live-search="true">
                                    <option selected>数量</option>
                                    <option value="1">1间</option>
                                    <option value="2">2间</option>
                                    <option value="3">3间</option>
                                    <option value="4">4间</option>
                                    <option value="5">5间</option>
                                </select>
                            </div>
                            <div class="form-row col-md-6 ">
                                <div class="col-md-6">
                                    <label for="CheckinDate">入住日期</label>
                                    <input type="date" class="form-control" id="CheckinDate" placeholder="预计入住日期">
                                </div>
                                <script>
                                    // 更新当前日期的函数
                                    function updateCurrentDate() {
                                        const currentDate = new Date().toISOString().split("T")[0];
                                        document.getElementById("checkinDate").value = currentDate;
                                    }

                                    // 初始化时更新一次当前日期
                                    updateCurrentDate();

                                    // 每分钟更新一次当前日期
                                    setInterval(updateCurrentDate, 60000);
                                </script>
                                <div class="col-md-6">
                                    <label for="CheckoutDate">退房日期</label>
                                    <input type="date" class="form-control" id="CheckoutDate" placeholder="预计退房日期">
                                </div>
                                <script>
                                    // 更新增加一天后的日期的函数
                                    function updateCheckoutDate() {
                                        const currentDateAddOne = new Date();
                                        currentDateAddOne.setDate(currentDateAddOne.getDate() + 1);
                                        const tomorrowDate = currentDateAddOne.toISOString().split("T")[0];
                                        document.getElementById("checkoutDate").value = tomorrowDate;
                                    }

                                    // 初始化时更新一次增加一天后的日期
                                    updateCheckoutDate();

                                    // 每分钟更新一次增加一天后的日期
                                    setInterval(updateCheckoutDate, 60000);
                                </script>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="AdultCount">入住大人数</label>
                                <select class="form-control" id="AdultCount" title="大人" data-live-search="true">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="5">6</option>
                                    <!-- 添加具体大人人数选项 -->
                                </select>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="ChildCount">入住小孩数量</label>
                                <select class="form-control" id="ChildCount" title="选择房间号" data-live-search="true">

                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <!-- 添加具体小孩数量选项 -->
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="ScheduledTime">预定时间</label>
                                <input type="datetime-local" class="form-control" id="ScheduledTime" placeholder="预定时间">
                            </div>

                            <script>
                                function formatTime(time) {
                                    return time < 10 ? "0" + time : time;
                                }

                                // 更新预定时间的函数
                                function updateScheduledTime() {
                                    var scheduledTimeField = document.getElementById("ScheduledTime");
                                    var currentDateTime = new Date();

                                    var year = currentDateTime.getFullYear();
                                    var month = formatTime(currentDateTime.getMonth() + 1);
                                    var day = formatTime(currentDateTime.getDate());
                                    var hours = formatTime(currentDateTime.getHours());
                                    var minutes = formatTime(currentDateTime.getMinutes());

                                    var formattedTime = `${year}-${month}-${day}T${hours}:${minutes}`;
                                    scheduledTimeField.value = formattedTime;
                                }

                                // 每分钟更新一次时间
                                setInterval(updateScheduledTime, 60000);

                                // 页面加载时初始化预定时间
                                updateScheduledTime();
                            </script>
                            <div class="form-group col-md-3">
                                <label for="RoomNumber">房间号</label>
                                <!-- 这里要通过查询房源列表进行筛选看哪些房间可以出售 -->
                                <select class="form-control" id="RoomNumber">
                                    <option selected>房间号</option>
                                    <option value="101">101</option>
                                    <option value="201">201</option>
                                    <option value="301">301</option>
                                    <option value="401">401</option>
                                    <option value="501">501</option>
                                    <option value="601">601</option>
                                    <!-- 添加具体房间号选项 -->
                                </select>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="PaymentMethod">支付方式</label>
                                <select class="form-control" id="PaymentMethod">
                                    <option selected>支付方式</option>
                                    <!-- 添加具体支付方式选项 -->
                                    <option value="支付宝">支付宝</option>
                                    <option value="微信">微信</option>
                                    <option value="银联卡">银联卡</option>
                                    <option value="现金">现金</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="BookingMethod">预订方式</label>
                                <select class="form-control" id="BookingMethod">
                                    <option value="线下预定">线下预定</option>
                                    <option value="线上预定">线上预定</option>
                                </select>
                            </div>
                            <script>
                                // 设置默认选择为 "线下预定"
                                document.getElementById("BookingMethod").value = "线下预定";
                            </script>
                            <div class="form-group col-md-12">
                                <textarea class="form-control" id="Textarea" rows="4" placeholder="备注"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="Close" data-dismiss="modal">关闭</button>
                    <button type="button" id="SaveChanges" class="btn btn-primary">保存更改</button>
                </div>
            </div>
        </div>
    </div>
</body>



<script>
    // 这个js代码不能删！！！！！！！！！！！！！
    // 这个js代码不能删！！！！！！！！！！！！！
    // 取消预订按钮点击事件
    $("#cancelButton").click(function() {
        document.getElementById("myFrom01").reset(); // 重置表单
    });

    // 显示客户自主预定房间分配管理
    $(document).ready(function() {
        // 发送 Ajax 请求获取数据
        $.ajax({
            url: '../backend/api/preOrderManagementPage_6.php',
            dataType: 'json',
            success: function(response) {
                // 清空表格内容
                $('#bookingTable tbody').empty();
                // 填充表格数据
                $.each(response, function(index, booking) {
                    // 只填充预订方式不是 "线下预定" 的数据
                    if (booking.bookingMethod != '线下预定') {
                        var row = $('<tr>').appendTo('#bookingTable tbody');
                        $('<td>').text(index + 1).appendTo(row);
                        $('<td>').text(booking.customerName).appendTo(row);
                        $('<td>').text(booking.customerPhone).appendTo(row);
                        $('<td>').text(booking.roomType).appendTo(row);
                        $('<td>').text(booking.roomCount).appendTo(row);
                        $('<td>').text(booking.checkinDate).appendTo(row);
                        $('<td>').text(booking.checkoutDate).appendTo(row);
                        $('<td>').text(booking.adultCount).appendTo(row);
                        $('<td>').text(booking.childCount).appendTo(row);
                        $('<td>').text(booking.scheduledTime).appendTo(row);
                        $('<td>').text(booking.roomNumber).appendTo(row);
                        $('<td>').text(booking.paymentMethod).appendTo(row);
                        $('<td>').text(booking.bookingMethod).appendTo(row);
                        $('<td>').text(booking.account_phone).appendTo(row);
                        $('<td>').text(booking.remarks).appendTo(row);
                        // 创建包含详情和删除按钮的 td 元素
                        var buttonGroup = $('<td>');
                        // 创建详情按钮
                        var detailButton = $('<button>')
                            .text('详情')
                            .addClass('btn btn-warning view-details')
                            .attr('id', 'details-' + booking.predetermine_id)
                            .data('predetermine-id', booking.predetermine_id)
                            .attr('data-toggle', 'modal')
                            .attr('data-target', '#exampleModal')
                            .appendTo(buttonGroup);
                        // 创建删除按钮
                        var deleteButton = $('<button>')
                            .text('删除')
                            .addClass('btn btn-danger delete-booking')
                            .attr('id', 'delete-' + booking.predetermine_id)
                            .data('predetermine-id', booking.predetermine_id)
                            .appendTo(buttonGroup);
                        // 将包含按钮的 td 元素添加到行中
                        row.append(buttonGroup);
                    }
                });
            },
            error: function() {
                // Ajax 请求错误处理
                alert('Ajax 请求发生错误');
            }
        });
    });







    // 把数据库里的列表查询出来
    $(document).ready(function() {
        // 发送 Ajax 请求获取数据库中的数据
        $.ajax({
            url: '../backend/api/preOrderManagementPage_1.php', // 替换成你的 PHP 文件路径
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                // 在成功接收到响应后，处理返回的数据
                if (response.status === 'success') {
                    var bookings = response.bookings; // 数据库中查询到的数据数组
                    console.log(bookings);
                    // 清空表格内容
                    $('#tableBody').empty();
                    // 遍历数据数组，构建表格行并插入到表格中
                    $.each(bookings, function(index, booking) {
                        var row = `<tr>
                                  <td>${index + 1}</td>
                                  <td>${booking.customerName}</td>
                                  <td>${booking.customerPhone}</td>
                                  <td>${booking.roomType}</td>
                                  <td>${booking.roomCount}</td>
                                  <td>${booking.checkinDate}</td>
                                  <td>${booking.checkoutDate}</td>
                                  <td>${booking.adultCount}</td>
                                  <td>${booking.childCount}</td>
                                  <td>${booking.scheduledTime}</td>
                                  <td>${booking.roomNumber}</td>
                                  <td>${booking.paymentMethod}</td>
                                  <td>${booking.bookingMethod}</td>
                                  <td>${booking.account_phone}</td>
                                  <td>${booking.remarks}</td>
                                  <td>
                                    <button type="button" class="btn btn-warning view-details" id="details-${booking.predetermine_id}" data-predetermine-id="${booking.predetermine_id}" data-toggle="modal"
                                        data-target="#exampleModal">
                                        详情
                                    </button>
                                    <button class="btn btn-danger delete-booking" id="delete-${booking.predetermine_id}" data-predetermine-id="${booking.predetermine_id}">删除</button>
                                </td>
                                  
                
                              </tr>`;

                        // 将构建好的行插入到表格中
                        $('#tableBody').append(row);
                    });
                    // 订单管理的代码，不能动
                    // 通过插件管理页面订单信息的代码
                    $(document).ready(function() {
                        if (!$.fn.DataTable.isDataTable('#yourTableId1')) {
                            var table = $('#yourTableId1').DataTable({
                                // 这里书写其他设置项
                                paging: true,
                                language: {
                                    url: "../data/语言数据/chinese.json" // 或直接设置一个对象，包含中文的各种提示信息
                                },
                                columnDefs: [{
                                    targets: [5], // 设第6列是日期列
                                    type: 'date-eu' // 指定使用 Date input 插件
                                }],
                                initComplete: function() {
                                    var api = this.api();
                                    api.columns([3, 5, 9, 12]).every(function() {
                                        var column = this;
                                        var select = $('<select><option value=""></option></select>')
                                            .appendTo($(column.header()))
                                            .on('change', function() {
                                                var val = $.fn.dataTable.util.escapeRegex(
                                                    $(this).val()
                                                );
                                                column.search(val ? '^' + val + '$' : '', true, false).draw();
                                            });
                                        if (column.index() === 3) {
                                            select.append('<option value="单人间">单人间</option>');
                                            select.append('<option value="双人间">双人间</option>');
                                            select.append('<option value="豪华大床房">豪华大床房</option>');
                                        } else if (column.index() === 5) {
                                            column.data().unique().sort().each(function(d, j) {
                                                select.append('<option value="' + d + '">' + d + '</option>');
                                            });
                                        } else if (column.index() === 9) {
                                            column.data().unique().sort().each(function(d, j) {
                                                select.append('<option value="' + d + '">' + d + '</option>');
                                            });
                                        } else if (column.index() === 12) {
                                            select.append('<option value="线上预定">线上预定</option>');
                                            select.append('<option value="线下预定">线下预定</option>');
                                        }
                                    });
                                    // Add search input for "日期" column with datepicker
                                    // Add search input for "客户姓名" column
                                    $('#yourTableId1 thead tr').eq(1).append('<th>搜索</th>');
                                    $('#yourTableId1 thead tr:eq(1) th').each(function(i) {
                                        var title = $(this).text();
                                        if (title === '客户姓名') {
                                            $(this).php('<input type="text" placeholder="搜索 ' + title + '" />');
                                            $('input', this).on('keyup change', function() {
                                                if (table.column(i + ':visible').search() !== this.value) {
                                                    table.column(i + ':visible').search(this.value).draw();
                                                }
                                            });
                                        }
                                    });
                                }
                            });
                        }
                    });
                } else {
                    console.log('获取预定信息失败');
                }
            },
            error: function() {
                console.log('发生错误，请重试');
            }
        });
    });
























    // 页面具体操作
    // 添加预订按钮点击事件
    // 这个js代码不能删！！！！！！！！！！！！！
    // 这个js代码不能删！！！！！！！！！！！！！
    $("#addBookingButton").click(function() {
        event.preventDefault();
        // // 解绑删除按钮的点击事件
        // 获取预订数据
        var bookings = {
            customerName: $("#customerName").val(),
            customerPhone: $("#customerPhone").val(),
            roomType: $("#roomType").val(),
            roomCount: $("#roomCount").val(),
            checkinDate: $("#checkinDate").val(),
            checkoutDate: $("#checkoutDate").val(),
            adultCount: $("#adultCount").val(),
            childCount: $("#childCount").val(),
            scheduledTime: $("#scheduledTime").val(),
            roomNumber: $("#roomNumber").val(),
            paymentMethod: $("#paymentMethod").val(),
            bookingMethod: $("#bookingMethod").val(),
            remarks: $("#textarea").val()
        };
        console.log(bookings),
            // 发送预订数据到PHP文件，以便插入到数据库中
            $.ajax({
                type: "POST",
                url: "../backend/api/preOrderManagementPage_2.php",
                data: bookings,
                success: function(response) {
                    if (response == "success") {
                        // 显示成功信息
                        alert("预订成功！");
                    } else {
                        // 显示错误信息
                        // alert("预订失败，请重试。");
                        console.log(response);
                    }
                }
            });


        // 清除表单数据
        // 恢复表单为默认值
        document.getElementById("myFrom01").reset();
    });





    // 模态框操作
    // 模态框操作
    $(document).ready(function() {
        // 点击 "查看详情" 按钮的事件处理函数
        $(document).on('click', '.view-details', function() {
            // 获取当前行的索引值
            var rowIndex = $(this).data('predetermine-id');
            console.log(rowIndex);
            $.ajax({
                url: '../backend/api/preOrderManagementPage_3.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    predetermine_id: rowIndex
                },
                success: function(response) {
                    if (response.status === 'success') {
                        var booking = response.booking;
                        $('#editPredetermine_id').val(booking.predetermine_id);
                        $('#CustomerName').val(booking.customerName);
                        $('#CustomerPhone').val(booking.customerPhone);
                        $("#RoomType").val(booking.roomType);
                        $("#RoomCount").val(booking.roomCount);
                        $("#CheckinDate").val(booking.checkinDate);
                        $("#CheckoutDate").val(booking.checkoutDate);
                        $("#ChildCount").val(booking.childCount);
                        $("#ScheduledTime").val(booking.scheduledTime);
                        $("#RoomNumber").val(booking.roomNumber);
                        $("#PaymentMethod").val(booking.paymentMethod);
                        $("#BookingMethod").val(booking.bookingMethod);
                        $("#Textarea").val(booking.remarks); // 修正Textarea的选择器

                        console.log("数据的id值" + booking.predetermine_id);
                        $('#exampleModal').modal('show');
                    } else {
                        console.error('无法获取详细预定信息');
                    }
                },
                error: function() {
                    console.error('Ajax请求中出错');
                }
            });
        });
        // 点击 "保存更改" 按钮的事件处理函数
        $("#SaveChanges").click(function() {
            event.preventDefault();
            // 获取需要更新的订单 id
            // 在你的页面中获取订单 id 的方式，例如从模态框中获取
            var predetermineId = $('#editPredetermine_id').val();
            console.log(predetermineId);
            // 构建需要更新的数据
            var bookings = {
                customerName: $("#CustomerName").val(),
                customerPhone: $("#CustomerPhone").val(),
                roomType: $("#RoomType").val(),
                roomCount: $("#RoomCount").val(),
                checkinDate: $("#CheckinDate").val(),
                checkoutDate: $("#CheckoutDate").val(),
                adultCount: $("#AdultCount").val(),
                childCount: $("#ChildCount").val(),
                scheduledTime: $("#ScheduledTime").val(),
                roomNumber: $("#RoomNumber").val(),
                paymentMethod: $("#PaymentMethod").val(),
                bookingMethod: $("#BookingMethod").val(),
                remarks: $("#Textarea").val()
            };
            // 发送 Ajax 请求
            $.ajax({
                url: '../backend/api/preOrderManagementPage_4.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    predetermineId: predetermineId,
                    bookings: bookings
                },
                success: function(response) {
                    if (response.status === 'success') {
                        console.log('数据更新成功');
                        // 刷新页面
                        //window.location.reload();
                        // 关闭模态框
                        $('#exampleModal').modal('hide');
                    } else {
                        console.error('更新数据失败');
                    }
                },
                error: function() {
                    console.error('Ajax请求中出错');
                }
            });

            $('#exampleModal').modal('hide');
        });
    });

    // // // 删除
    // $(document).on('click', '.delete-booking', function () {
    //     // 获取当前行的索引值
    //     var rowIndex = $(this).data('predetermine-id');
    //     console.log(rowIndex);
    //     var confirmDelete = confirm("确认要删除吗？");
    //     if (confirmDelete) {
    //         // 发送 Ajax 请求
    //         $.ajax({
    //             url: '../backend/api/preOrderManagementPage_4.php',
    //             type: 'POST',
    //             dataType: 'json',
    //             data: { predetermineId: rowIndex }
    //         });
    //         // 刷新页面
    //         //window.location.reload();
    //     } else {
    //         alert("取消删除操作");
    //     }
    // });

    // 点击删除按钮的事件处理函数
    $(document).on('click', '.delete-booking', function() {
        // 获取当前行的订单 id
        var predetermineId = $(this).data('predetermine-id');
        var confirmDelete = confirm("确认要删除吗？");
        if (confirmDelete) {
            // 发送 Ajax 请求
            $.ajax({
                url: '../backend/api/preOrderManagementPage_5.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    predetermineId: predetermineId
                },
                success: function(response) {
                    if (response.status === 'success') {
                        // 删除成功后的处理，例如提示用户或者刷新页面
                        alert('订单删除成功');
                        // 刷新页面
                        //window.location.reload();
                    } else {
                        // 删除失败后的处理，例如提示用户
                        alert('订单删除失败');
                    }
                },
                error: function() {
                    // Ajax 请求错误处理
                    alert('Ajax 请求发生错误');
                }
            });
        } else {
            alert("取消删除操作");
        }
    });





    // 关闭模态框
    $('#exampleModal').on('hidden.bs.modal', function(e) {
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    });

    $(document).on('click', '#Close', function() {
        $('#exampleModal').modal('hide');
    });
    $(document).on('click', '.close', function() {
        $('#exampleModal').modal('hide');
    });
</script>


</html>